<template>
  <view class="my-to-do">
    <view class="title">
      <text>我的待办</text>
      <text>努力就会有回报</text>
    </view>
    <view class="my-to-do-con">
      <view class="my-to-do-statistics">
        <view class="my-to-do-statistics-item">
          <view class="statistics-item-top">紧急待办</view>
          <view class="statistics-item-bottom">
            <text>108</text>
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01uSwzR71S9wNSz6LnZ_!!1034622205.png"
              alt=""
            />
          </view>
        </view>
        <view class="my-to-do-matter-item">
          <view class="matter-item-top">
            <view class="matter-item-top-left">待办事项</view>
            <view class="matter-item-num">
              <view class="item-num-one"> <text></text>22 </view>
              <view class="item-num-two"> <text></text>6 </view>
            </view>
          </view>
          <view class="matter-item-bottom">
            <view class="matter-item-bottom-left"> <text>6</text><text>/10</text> </view>
            <img
              src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01Vr1EEQ1S9wNS8dH1r_!!1034622205.png"
              alt=""
            />
          </view>
        </view>
      </view>
      <view class="my-to-do-list">
        <nut-swiper
          :pagination-visible="true"
          class="my-to-do-list-swiper"
          :init-page="page"
          :loop="true"
          ref="swiper"
        >
          <nut-swiper-item
            v-for="item in list"
            :key="item"
          >
            <view
              class="toDo-list-item"
              v-for="item in 3"
              :key="item"
            >
              <view class="toDo-list-item-left">
                <view class="toDo-list-item-icon">
                  <view class="icon-box"> </view>
                  <view class="icon-text">人力</view>
                </view>
                <view class="toDo-list-item-content">
                  <view class="content-title-box">
                    <view class="content-title-left">
                      <view class="content-title">年度人效统计数据报告</view>
                      <nut-tag
                        type="success"
                        class="tag1"
                      >
                        催办
                      </nut-tag>
                      <nut-tag type="danger">S级</nut-tag>
                    </view>
                    <view class="content-user-info">
                      <view class="user">
                        <view class="user-title">发起人</view>
                        <view class="user-name">
                          <img
                            src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01Vr1EEQ1S9wNS8dH1r_!!1034622205.png"
                            alt=""
                          />
                          <view class="user-name-text">张三</view>
                        </view>
                      </view>
                      <view class="time">
                        <view class="time-title">时间</view>
                        <view class="time-text">截止12-12 15:30</view>
                      </view>
                    </view>
                    <view class="content-title-status">
                      <view class="status-num">
                        <img
                          src="https://img.alicdn.com/imgextra/i2/1034622205/O1CN01wHqTZP1S9wNSz7MBl_!!1034622205.png"
                          alt=""
                        />
                        <view class="status-num-text">无</view>
                      </view>
                      <view class="status-title">
                        <view class="status-text">
                          <i
                            class="iconfont icon-weibiaoti--"
                            style="font-size: 10px"
                          ></i>
                          <view>进行中</view>
                        </view>
                        <nut-progress
                          percentage="50"
                          :show-text="false"
                          stroke-height="24"
                          stroke-color="#1E74FD"
                          size="small"
                        />
                      </view>
                      <view class="status-collaborate">
                        <view class="collaborate-text">
                          <img
                            src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01zJrJSD1S9wNKsJJTe_!!1034622205.png"
                            alt=""
                          />
                          <view class="collaborate-num">
                            <view class="collaborate-user"> 协作 </view>
                            <nut-avatar-group
                              max-count="3"
                              zIndex="right"
                              max-content="..."
                              size="small"
                            >
                              <nut-avatar
                                v-for="itm in 6"
                                :key="itm"
                                size="small"
                                url="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"
                              >
                              </nut-avatar>
                            </nut-avatar-group>
                            <view class="collaborate-user-num">+12</view>
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="toDo-list-item-jt">
                <i
                  class="iconfont icon-youjiantou1"
                  style="font-size: 14px; font-weight: 600"
                ></i>
              </view>
            </view>
          </nut-swiper-item>
        </nut-swiper>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
const page = ref(0);
const list = ref([0, 1, 2]);
</script>

<style lang="less">
@import "./index.less";
</style>
